<template>
    <div class="shapes-panel">
        <div class="shapes-panel-title">基本图形</div>
        <div class="shapes-panel-content">
            <div class="shapes-panel-item" v-for="item in componentShapesList" :key="item.name" draggable="true"
                @mousedown="handleMousedown(item.type)" @click="handleClick(item.type)">
                <i class="iconfont" :class="item.icon"></i>
                <label>{{ item.name }}</label>
            </div>
        </div>
    </div>
</template>

<script>
import { componentShapesList } from '../utills/consts';

export default {
    name: 'ShapesPanel',
    props: {
        // 如果需要从父组件接收数据，可以在这里添加props
    },
    data() {
        return {
            componentShapesList: componentShapesList,
        }
    },
    methods: {
        handleMousedown(type) {
            this.$emit('shape-mousedown', type);
        },
        handleClick(type) {
            this.$emit('shape-click', type);
        }
    }
}
</script>

<style lang="scss" scoped>
$baseBg: #323e52;
$contentBg: #2c3e50;
$baseColor: #c5cfe3;

.shapes-panel {
    background-color: $contentBg;
    width: 240px;
    height: calc(100vh - 51px);
    overflow-y: auto;

    &-title {
        color: $baseColor;
        background-color: $baseBg;
        padding: 10px 20px;
    }
    
    &-content {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        max-width: 500px;
        overflow-y: auto;
        
        .shapes-panel-item {
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            transition: all 0.3s;
            cursor: pointer;
            height: 80px;
            width: 80px;
            color: $baseColor;
            border: 2px solid $contentBg;
            border-radius: 4px;

            &:hover {
                border: 2px solid #009dff;
                background-color: $baseBg;
            }
            
            i {
                pointer-events: none;
                font-size: 30px;
            }
            
            label {
                margin-top: 10px;
                font-size: 14px;
            }
        }
    }
}
</style> 